<template>
	<view class="back">
		<!--我的课程-->
		<view class="view1">
			<view style="width: 98vw;height: 6vh;">
				<view class="view2">
					<image class="tubiao" src="../../static/myclass.svg"></image>
				</view>
				<view class="view3">
					<text style="font-size: 20px;color: white;">我的课程</text>
				</view>
				<view class="view4">
					<image class="tubiao1" src="../../static/myclass-add.svg" @click="kai()"></image>
				</view>
			</view>
		</view>
		
		<!--课程模块-->
		<view class="view11">
			<view class="view5"> 
				<view class="view5-1">
					<view class="view5-3">
						<image class="tubiao1" src="../../static/ryts.svg"></image>
					</view>
					<view class="view5-4">
						<text style="font-size: 20px;color: black;">胸</text>
					</view>
					<navigator url="/pages/class/insertAction">
						<view class="view5-7">
							<image class="tubiao2" src="../../static/ad.png"></image>
						</view>
					</navigator>
				</view>
				<view class="view5-2">
					<view class="view5-5">
						<view class="view5-6">
							<u-tag text="推举" size="mini" bgColor="rgb(237,237,237)" borderColor="rgb(237,237,237)" color="black">
							</u-tag> 
						</view>		
					</view>
				</view>
			</view>
		</view>
		
		<!--添加课程-->
		<u-popup :show="xuanze" :round="10" mode="center" bgColor="transparent">
			<view class="view6" :show="xuanze">
				<view class="view6-1">
					<text style="font-size: 20px;color: black;">请选择您要训练的部位</text>
				</view>
				<view class="view6-2">
					<view class="view6-3"></view>
					<view class="view6-4">
						<view class="view6-5" @click="handleTagClick('二头肌')">
							<text style="font-size: 15px;color: black;">二头肌</text>
						</view>
						<view class="view6-5" @click="handleTagClick('二')">
							<text style="font-size: 15px;color: black;">二</text>
						</view>
						<view class="view6-5">
							<text style="font-size: 15px;color: black;">二头</text>
						</view>
						<view class="view6-5">
							<text style="font-size: 15px;color: black;">二头肌二</text>
						</view>
					</view>
					<view class="view6-3"></view>
				</view>
			</view>
			
			<view class="view7" :show="xuanze">
				<view class="view7-1">
					<text style="font-size: 20px;color: black;margin-left: 38vw;">已选择课程</text>
					<view style="margin-left: auto;">
						<u-icon name="checkmark" @click="guan()"></u-icon>
					</view>
				</view>
				<view class="view7-2"> 
					<view v-for="(tag, index) in selectedTags" :key="index" class="tag-item">
						<view style="float: left;">{{ tag }}</view>
						<u-icon name="close" @click="removeTag(index)" style="margin-left: 1px;"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				xuanze: false,
				selectedTags: []  // 用于存储已选择的标签
			}
		},
		methods: {
			removeTag(index) {
			    // 在这里处理删除标签的逻辑
			    this.selectedTags.splice(index, 1);
			  },
			 handleTagClick(tag) {
			    // 在这里处理点击事件，可以根据需要进行其他操作
			    // 将点击的标签添加到selectedTags数组中
			    this.selectedTags.push(tag);
			  },
			kai(){
				this.xuanze = true;
			},
			guan(){
				this.xuanze = false;
			}
		}
	}
</script>

<style>
	.tag-item {
	  display: inline-block;
	  margin: 4px;  /* 调整标签之间的间距 */
	  padding: 8px;
	  background-color: #e0e0e0;
	  border-radius: 4px;
	  font-size: 14px;
	  color: black;
	}
	.back {
		width: 100vw;
		height: 100vh;
		background-color: rgb(237, 245, 247);
	}
	
	.view1 {
		width: 100vw;
		height: 8vh;
		/* float: left; */
		border-bottom: 1px solid lightgray;
	}
	
	.view2 {
		width: 13vw;
		height: 6vh;
		background-color: rgb(110, 231, 240);
		float: left;
		margin-left: 2vw;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-left-radius: 12px; //设置左上角圆角
		border-bottom-left-radius: 12px; //设置左下角圆角
		box-shadow: -4px 0px 8px rgba(0, 0, 0, 0.2);
	}
	
	.view3 {
		width: 70vw;
		height: 6vh;
		background-color: rgb(110, 231, 240);
		float: left;
		display: flex;
		align-items: center;
		box-shadow: 20px -13px 11px 12px rgba(0, 0, 0, 0.2);
	}
	
	.view4 {
		width: 13vw;
		height: 6vh;
		background-color: rgb(110, 231, 240);
		float: left;
		display: flex;
		align-items: center;
		border-top-right-radius: 12px; //设置右上角圆角
		border-bottom-right-radius: 12px; //设置右下角圆角
		box-shadow: 7px 0px 8px rgba(0, 0, 0, 0.2);
	}
	
	.view5{
		width: 100vw;
		height: 15vh;
		margin-top: 10px;
	}
	
	.view5-1{
		width: 96vw;
		height: 5vh;
		background-color: beige;
		margin-left: 2vw;
	}
	
	.view5-2{
		width: 96vw;
		height: 8vh;
		background-color: white;
		border-bottom-left-radius: 12px; //设置左下角圆角
		border-bottom-right-radius: 12px; //设置右下角圆角
		margin-left: 2vw;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
	}
	
	.view5-3{
		width: 10vw;
		height: 5vh;
		background-color: white;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-left-radius: 12px; //设置左上角圆角
	}
	
	.view5-4{
		width: 76vw;
		height: 5vh;
		background-color: white;
		float: left;
		display: flex;
		align-items: center;
		
	}
	
	.view5-5{
		width: 76vw;
		height: 8vh;
		background-color: white;
	}
	
	.view5-6{
		width: 20vw;
		height: 2vh;
		float: left;
		margin-left: 8rpx;
		margin-top: 15rpx;
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	.view5-7{
		width: 10vw;
		height: 5vh;
		float: left;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-right-radius: 12px; //设置右上角圆角
	}
	
	.view6{
		width: 98vw;
		height: 50vh;
		/* margin-left: 1vw; */
		margin-top: 5vh;
		float: left;
	}
	
	.view6-1{
		width: 98vw;
		height: 5vh;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		background-color: white;
	}
	
	.view6-2{
		width: 98vw;
		height: 45vh;
		float: left;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
		background-color: white;
	}
	
	.view6-3{
		width: 3vw;
		height: 45vh;
		float: left;
		/* background-color: aquamarine; */
	}
	
	.view6-4{
		width: 92vw;
		height: 45vh;
		float: left;
		/* background-color: bisque; */
	}
	
	.view6-5{
		width: 20vw;
		height: 5vh;
		float: left;
		margin-left: 2vw;
		margin-top: 1vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgb(247, 247, 247);
		border-radius: 8px;
		box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
	}
	
	.view7{
		width: 98vw;
		height: 20vh;
		float: left;
		/* margin-left: 1vw; */
		margin-top: 2vh;
	}
	
	.view7-1{
		width: 98vw;
		height: 5vh;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
		background-color: white;
	}
	
	.view7-2{
		width: 98vw;
		height: 15vh;
		float: left;
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
		background-color: white;
	}
	
	
	.view8{
		width: 88vw;
		height: 3vh;
		display: flex;
		justify-content: center;
		float: left;
	}
	
	.view9{
		width: 90vw;
		height: 3vh;
		margin-left: 4vw;
		float: left;
	}
	
	.view10{
		width: 3vw;
		height: 3vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.view11{
		width: 100vw;
		height: 92vh;
		overflow: auto;
	}
	
	.tubiao {
		width: 3rem;
		height: 3rem;
	}
	
	.tubiao1 {
		width: 2rem;
		height: 2rem;
	}
	
	.tubiao2 {
		width: 1.5rem;
		height: 1.5rem;
	}
</style>
